<template>
  <div v-loading="loadings" class="app-container">
    <!--    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">-->
    <!--      <el-form-item label="商品编号" prop="goods_id">-->
    <!--        <el-input-->
    <!--          v-model="queryParams.goods_id"-->
    <!--          placeholder="请输入商品编号"-->
    <!--          clearable-->
    <!--          size="small"-->
    <!--        />-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="商品名称" prop="goods_name">-->
    <!--        <el-input-->
    <!--          v-model="queryParams.goods_name"-->
    <!--          placeholder="请输入商品名称"-->
    <!--          clearable-->
    <!--          size="small"-->
    <!--        />-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
    <!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->

    <el-row
      v-show="this.queryParams.warehousing_id"
      :gutter="10"
    >

      <el-button
        v-if="status != '1'"
        v-action="'warehousingSon@create'"
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        :disabled="!this.queryParams.warehousing_id"
        @click="handleAdd"
      >新增</el-button>

      <!-- <el-col :span="1.5">
        <el-button
          v-if="status != '1'"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="productAdd"
        >添加商品</el-button>
      </el-col> -->

      <el-button
        v-if="status != '1'"
        style="margin-left: 0;"
        type="success"
        plain
        size="mini"
        icon="el-icon-finished"
        @click="goStockAll"
      >全部入库</el-button>

      <el-button
        v-if="status != '1'"
        v-action="'warehousingSon@delete'"
        style="margin-left: 0;"
        :disabled="multipleSelection.length != 1"
        size="mini"
        type="danger"
        icon="el-icon-delete"
        @click="handleDel"
      >删除</el-button>

      <el-button
        style="margin-left: 0;"
        size="mini"
        type="info"
        icon="el-icon-refresh"
        @click="reloadList"
      >刷新</el-button>
    </el-row>

    <el-table v-loading="loading" fit border size="mini" :data="list" highlight-current-row @selection-change="handleSelectionChange" @row-click="rowClick">
      <!--      <el-table-column type="expand">-->
      <!--        <template slot-scope="props">-->
      <!--          <el-form label-position="left" inline class="demo-table-expand">-->
      <!--            <el-form-item label="入库主单编号">-->
      <!--              <span>{{ props.row.warehousing_id }}</span>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="入库明细编号">-->
      <!--              <span>{{ props.row.warehousing_son_id }}</span>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="商品数量">-->
      <!--              <span>{{ props.row.number }}</span>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="录入方式">-->
      <!--              <span v-if="props.row.enter_type == '0'">把枪录入</span>-->
      <!--              <span v-else>手动录入</span>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="创建时间">-->
      <!--              <span>{{ props.row.created_at }}</span>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="规格">-->
      <!--              <span>{{ props.row.packingInfo.layup_num }}/{{ props.row.packingInfo.unit_name }}/{{ props.row.packingInfo.packing_num }}</span>-->
      <!--            </el-form-item>-->
      <!--          </el-form>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column prop="batch_number" label="批次号" align="center" />-->

      <el-table-column
        type="selection"
        width="55"
        :selectable="selectable"
      />

      <el-table-column
        label="行号"
        type="index"
        :index="indexMethod"
      />
      <el-table-column prop="serial_number" label="成品料号" align="center" />
      <el-table-column prop="goods_name" label="商品名称" align="center" />
      <el-table-column prop="sku" label="型号" align="center" />pallet_no
      <el-table-column prop="new_carton_size" label="尺寸" align="center" />
<!--      <el-table-column prop="pallet_no" label="栈板号" align="center" />-->
<!--      <el-table-column prop="pallet_no_img" label="栈板号条形码" align="center" >-->
<!--        <template #default="scope">-->
<!--          <el-image-->
<!--            :src="scope.row.pallet_no_img"-->
<!--            :preview-src-list="[scope.row.pallet_no_img]"-->
<!--          fit="contain"-->
<!--            z-index="550"-->
<!--          />-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="number" label="商品数量" align="center" />
<!--      <el-table-column prop="box_number" label="商品箱数" align="center" />-->
<!--      <el-table-column prop="tray_number" label="托盘数" align="center" />-->
      <el-table-column prop="actual_number" label="入库数量" align="center" />
      <el-table-column label="预入库" align="center">
        <el-table-column prop="describe" label="商品描述" align="center" show-overflow-tooltip />

        <template v-slot="scope">
          <span v-if="scope.row.tray_info.length > 0 ">✓</span>
          <span v-else>×</span>
        </template>

      </el-table-column>
      <el-table-column prop="status" label="入库状态" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.status === '0'">未入库</span>
          <span v-else-if="scope.row.status === '1'">全部入库</span>
          <span v-else-if="scope.row.status === '2'">部分入库</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="username" label="添加人" align="center" /> -->
      <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">-->
      <!--        <template slot-scope="scope">-->
      <!--          &lt;!&ndash; v-if="!scope.row.tray_number" &ndash;&gt;-->
      <!--          <el-button-->
      <!--            v-show="scope.row.status != 1"-->
      <!--            v-action=""-->
      <!--            size="mini"-->
      <!--            type="primary"-->
      <!--            @click="seat(scope.row)"-->
      <!--          >库位选择-->
      <!--          </el-button>-->
      <!--          <el-button-->
      <!--            v-action="'tray@index'"-->
      <!--            size="mini"-->
      <!--            type="success"-->
      <!--            @click="tray(scope.row)"-->
      <!--          >托盘信息-->
      <!--          </el-button>-->
      <!--          &lt;!&ndash;          <el-button&ndash;&gt;-->
      <!--          &lt;!&ndash;            v-if="scope.row.status === '0'"&ndash;&gt;-->
      <!--          &lt;!&ndash;            v-action="'warehousingSon@update'"&ndash;&gt;-->
      <!--          &lt;!&ndash;            size="mini"&ndash;&gt;-->
      <!--          &lt;!&ndash;            type="primary"&ndash;&gt;-->
      <!--          &lt;!&ndash;            @click="handleEdit(scope.row)"&ndash;&gt;-->
      <!--          &lt;!&ndash;          >修改&ndash;&gt;-->
      <!--          &lt;!&ndash;          </el-button>&ndash;&gt;-->
      <!--          <el-button-->
      <!--            v-if="scope.row.status === '0'"-->
      <!--            v-action="'warehousingSon@delete'"-->
      <!--            size="mini"-->
      <!--            type="danger"-->
      <!--            @click="handleDel(scope.row)"-->
      <!--          >删除-->
      <!--          </el-button>-->
      <!--          &lt;!&ndash;          <el-button&ndash;&gt;-->
      <!--          &lt;!&ndash;            v-action="'warehousingSon@print'"&ndash;&gt;-->
      <!--          &lt;!&ndash;            size="mini"&ndash;&gt;-->
      <!--          &lt;!&ndash;            type="warning"&ndash;&gt;-->
      <!--          &lt;!&ndash;            @click="prints(scope.row)"&ndash;&gt;-->
      <!--          &lt;!&ndash;          >打印&ndash;&gt;-->
      <!--          &lt;!&ndash;          </el-button>&ndash;&gt;-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <pagination v-show="total>0" :small="true" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
    <!-- 新增/修改 -->
    <AddEdit :open.sync="open" :open1.sync="open1" :title="title" :warehousing_id="warehousing_id" :num="num" :form="form" @childEvent="handleChildEvent" @getList="getList" />
    <!-- 打印 -->
    <Print :open-one.sync="openOne" :warehousing_id="warehousing_id" :warehousing_son_id="warehousing_son_id" />
    <!-- 库位选择 -->
    <Seat :opens.sync="opens" :title="title" :form="form" :surplus="surplus" />
    <!-- 库位选择 -->
    <Product :openx.sync="openx" :title="title" :form="form" />
  </div>
</template>
<script>
import { warehousingSonList, warehousingSonDel, goodsNumber, traySurplus, createDel, goStockAll } from '@/api/storehouse'
import AddEdit from './AddEdit'
import Print from './Print'
import Seat from './Seat'
import Product from './product'
export default {
  name: 'Index',
  components: {
    AddEdit,
    Print,
    Seat,
    Product
  },
  props: {
    _warehousing_id: {
      type: [String, Boolean, Number],
      default: ''
    },
    _warehousing_status: {
      type: [String, Boolean, Number],
      default: ''
    }
  },
  data() {
    return {
      multipleSelection: [],
      // 遮罩层
      loading: true,
      open: false,
      open1: false,
      opens: false,
      openx: false,
      openOne: false,
      title: '',
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      form: {},
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10,
        goods_id: undefined,
        goods_name: undefined
      },
      status: 0,
      warehousing_id: '',
      warehousing_son_id: '',
      // 商品总数量剩余数
      num: 0,
      surplus: 0,
      loadings: false
    }
  },
  watch: {
    '_warehousing_id': function(newValue, oldValue) {
      if (newValue) {
        this.queryParams.warehousing_id = newValue
        this.warehousing_id = newValue
        this.getList()
      }
    }
  },
  created() {
    this.getList()
    this.status = this.$route.query.status
  },
  methods: {
    handleImageClick(){
      console.log(1111);
    },
    indexMethod(index) {
      return (this.queryParams.page - 1) * (this.queryParams.limit) + index + 1
    },
    handleChildEvent() {
      this.$emit('childEvent')
    },
    reloadList() {
      this.getList()
    },
    rowClick(row, column, event) {
      this.$emit('getRow', row)
      console.log(row)
    },
    selectable(row, index) {
      if (row.disabled == 'disabled') {
        return false
      } else {
        return true
      }
    },
    /** 查询列表 */
    getList() {
      const that = this
      this.loading = true
      this.queryParams['warehousing_id'] = this.$route.query.warehousing_id || this._warehousing_id
      this.warehousing_id = this.queryParams['warehousing_id']
      warehousingSonList(this.queryParams).then(response => {
        if (response.code === 10000) {
          that.list = response.data

          that.$emit('emptyHide', false)

          that.list.forEach(item => {
            if (item.status == '1') {
              item.disabled = 'disabled'
            }
          })
          that.total = response.count
          that.loading = false
        }
        that.loading = false
      })
      // that.loading = false
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.goodsNum()
      this.form = {}
      this.open = true
      this.title = '添加'
    },
    /** 编辑按钮操作 */
    handleEdit(row) {
      this.goodsNum()
      this.form = JSON.parse(JSON.stringify(row))
      this.open = true
      this.title = '编辑'
    },
    /** 库位选择按钮操作 */
    seat(row) {
      this.surplusGoods(row.warehousing_son_id, row)
    },
    productAdd() {
      this.loadings = true
      goodsNumber({ warehousing_id: this.warehousing_id }).then(response => {
        if (response.code === 10000) {
          this.form = { warehousing_id: this.warehousing_id, num: response.data.number }
          this.openx = true
          this.title = '添加'
          this.loadings = false
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    surplusGoods(val, row) {
      this.loadings = true
      // 剩余商品入库数量
      traySurplus({ warehousing_son_id: val }).then(response => {
        if (response.code === 10000) {
          this.surplus = response.data.number
          this.packing_num = response.data.packing_num
          this.form = JSON.parse(JSON.stringify(row))
          this.title = '库位选择'
          this.opens = true
          this.loadings = false
        }
      })
    },
    /** 删除按钮操作 */
    handleDel() {
      const id = this.multipleSelection[0].warehousing_son_id

      const that = this
      that.$confirm('是否删除该数据？？？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.loading = true
        createDel({ warehousing_son_id: id.toString() }).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$notify.success(response.message)
            that.getList()
          } else {
            that.$notify.error(response.message)
          }
          that.$emit('childEvent')
        })
      }).catch(() => {
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 20,
        goods_id: undefined,
        goods_name: undefined
      }
      this.handleQuery()
    },
    goodsNum() {
      // 商品总数量剩余数
      goodsNumber({ warehousing_id: this.warehousing_id }).then(response => {
        if (response.code === 10000) {
          this.num = response.data.number
        }
      })
    },
    /** 分托盘 */
    tray(row) {
      this.$router.push({
        path: '/storehouse/tray',
        query: { warehousing_id: row.warehousing_id, warehousing_son_id: row.warehousing_son_id, status: row.status }
      })
    },
    /** 全部入库 */
    goStockAll() {
      const that = this
      that.$confirm('是否全部入库？？？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.loading = true
        goStockAll({ warehousing_id: that.warehousing_id }).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$notify.success(response.message)
            that.getList()
          } else {
            that.$notify.error(response.message)
          }
        })
        that.loading = false
      }).catch((error) => {
        that.loading = false
        console.log(error)
      })
    },
    /** 打印 */
    prints(row) {
      // this.warehousing_son_id = row.warehousing_son_id
      // this.openOne = true
    }
  }
}
</script>

